<template>
    <div class="Invite">
        <div class="logo">
                <canvas id="QRCode"></canvas>
        </div>
        <span>好友可直接扫码注册</span>
        <a href="" class="weui-btn weui-btn_primary site-bgcolor" id="rec_btn">分享链接</a>
    </div>
</template>

<script>
    import QRCode from "qrcode"; //引入生成二维码插件
    export default {
        name: "Invite",
        data(){
            return{
                QRCodeMsg:'',
                uid:1,
            }
        },
        watch: {
            // 通过监听获取数据
            QRCodeMsg(val) {
                // 获取页面的canvas
                var msg = document.getElementById("QRCode");
                // 将获取到的数据（val）画到msg（canvas）上
                QRCode.toCanvas(msg, val, function(error) {
                    console.log(error);
                });
            }
        },
        mounted(){
            this.getQRCode()
        },
        methods:{
            //生成分享二维码
            getQRCode() {
                this.QRCodeMsg = '/Register?fromid='+this.uid;//生成的二维码为URL地址
            }
        }
    }
    document.title='注册页'
</script>

<style scoped>
    @import "../assets/css/common.css";
    .logo{
        width:200px;
        height: 200px;
        margin: 50px auto;
    }
    #rec_btn{
        width: 80%;
        border-radius: 30px;
        padding:10px;
        font-weight: normal;
        margin-top: 20px;
    }
</style>
